<template>
    <div class="container">
      <div class="container--item">
        <div class="container--item__box">
          <div class="container--box__city" v-show="cityBoxBoole">
            <div class="container--item__city" v-if="cityBoole" @click="backAddress">
              <img src="../assets/receivingAddress/site.png" class="container--img__site" alt="#">
              <span class="container--site__name">{{isDefaults.receiver}}</span>
              <span class="container--site__tell">{{isDefaults.phoneNumber}}</span>
              <span class="container--site__site">
            {{isDefaults.location + ' ' + isDefaults.details }}
          </span>
              <img src="../assets/PersonalEnter/right.png" alt="#" class="container--site__right">
            </div>
            <div class="container--item__backCity" v-else @click="address">
              <span>+&nbsp;收货地址</span>
            </div>
          </div>
        </div>
        <div class="container--item__hr">
          <span class="container--hr__box" v-for="item in 4" :key="item">
            <span class="container--hr"><span class="container--hr__1"></span></span>
            <span class="container--hr"><span class="container--hr__2"></span></span>
            <span class="container--hr"><span class="container--hr__3"></span></span>
          </span>
        </div>
        <div class="container--item__commodityMsg">
          <img :src= 'commodityMsg[0].prod.prodImage[0]' alt="#">
          <div class="container--commodityMsg__right">
            <span>共{{commodityMsg.length}}件</span>
            <img src="../assets/PersonalEnter/right.png" alt="#">
          </div>
        </div>
        <ul class="container--item__body__msg">
          <li class="container--msg__payment">
            <span class="container--payment__option">支付方式</span>
            <span class="container--payment__text">在线支付</span>
          </li>
          <li class="container--msg__payment">
            <span class="container--payment__option">最高可优惠金额</span>
            <span class="container--payment__text">30元</span>
          </li>
          <li class="container--msg__payment bottom--border">
            <span class="container--payment__option">实际优惠金额</span>
            <span class="container--payment__text">无可用</span>
          </li>
          <li class="container--msg__payment">
            <span class="container--payment__option">商品金额</span>
            <span class="container--payment__text">￥{{totalPrice}}</span>
          </li>
          <li class="container--msg__payment bottom--margin">
            <span class="container--payment__option">运费</span>
            <span class="container--payment__text">￥0</span>
          </li>
          <li class="container--msg__payment">
            <span class="container--payment__text">
              合计：
              <span>￥{{totalPrice}}</span>
            </span>
          </li>
        </ul>
        <div class="container--item__bottom__btn" @click="payment">立即下单</div>
      </div>
    </div>
</template>

<script>
/* eslint-disable*/
  export default {
  name: 'account',
  data() {
    return {
      isDefaults: [],
      cartsId: [],
      getShippingAddressId: null,
      orderId: null,
      commodityMsg: null,
      totalPrice: null,
      cityBoole: true,
      cityBoxBoole: false,
    };
  },
  methods: {
    backAddress() {
      this.$router.push({ name: 'addressWarehouse', params: { data: 0 } })
    },
    address() {
      this.$router.push({ name: 'address', params: { data: 1 }})
    },
    payment() {
      if (this.getShippingAddressId) {
        this.$api.order({
          carts: this.cartsId,
          addr: this.getShippingAddressId,
          payStatus: 0,
        })
          .then(data => {
            console.log(data.data.data._id);
            this.orderId = data.data.data._id;
            this.$router.push({ name: 'onlinePayment', params: {totalPrice: this.totalPrice, orderId: this.orderId}})
          });
      } else {
        this.$popUp({ message: '请选择收货地址' })
      }

    }
  },
  created() {
    this.commodityMsg = JSON.parse(this.$route.params.id).cartids;
    this.totalPrice = JSON.parse(this.$route.params.id).totalPrice;
    this.commodityMsg.forEach((v) => {
      this.cartsId.push(v._id)
    });
    this.$api.getShippingAddress()
      .then(data => {
        console.log(data.data.data);
        this.cityBoxBoole = true;
        if (data.data.data[0]) {
          this.cityBoxBoole = true;
          data.data.data.forEach((v) => {
            v.isDefault ? this.isDefaults = v : this.isDefaults = data.data.data[0];
            this.getShippingAddressId = v._id;
          });
        } else {
          this.cityBoxBoole = true;
          this.cityBoole = false
        }
      })
  },
};
</script>

<style scoped lang="scss">
*{
  margin: 0;
  padding: 0;
  font-size: 0;
}
.container{
  width: 100vw;
  height: 100vh;
  background-color: #f0eff5;
  .container--item{
    width: 100vw;
    background-color: #f0eff5;
    .container--item__box{
      background-color: #fff;
      width: 100vw;
      height: 2rem;
      position: relative;
      .container--box__city{
        .container--item__city{
          background-color: #fff;
          position: relative;
          width: 100vw;
          height: 2rem;
          padding-left: .3333333rem;
          .container--site__right{
            width: .4rem;
            height: .4rem;
            position: absolute;
            right: .7rem;
            top: ((2-0.4)/2) + rem;
          }
          .container--img__site{
            height: .75rem;
            width: .75rem;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
          }
          .container--site__name{
            font-size: .4rem;
            position: absolute;
            top: .35rem;
            left: 13%;
            font-weight: 500;
            letter-spacing: 1px;
          }
          .container--site__tell{
            position: absolute;
            top: .35rem;
            right: 10%;
            font-size: .35rem;
            font-weight: 500;
          }
          .container--site__site{
            position: absolute;
            top: 1.15rem;
            left: 13%;
            font-size: .4rem;
            font-weight: 500;
            color: #676767;
          }
        }
        .container--item__backCity{
          text-align: center;
          position: absolute;
          left: 2rem;
          right: 2rem;
          top: .5rem;
          bottom: .5rem;
          margin: auto;
          border: 1px solid #ccc;
          span{
            font-size: .35rem;
            line-height: 1rem;
            color: #959595;
          }
        }
      }
    }
    .container--item__hr{
      width: 150vw;
      height: .1rem;
      background-color: #fff;
      .container--hr__box{
        display: inline-block;
        margin-left: 1.2rem;
        position: relative;
        left: -1.2rem;
        span{
          display: inline-block;
          width: .67rem;
          height: .1rem;
          transform: skew(-135deg);
          span{
            display: inline-block;
            transform: skew(-135deg);
          }
          .container--hr__1{
            background-color: #b6dbf8;
            margin-left: -.2rem;
          }
          .container--hr__2{
            background-color: #eec7aa;
            margin-left: .2rem;
          }
          .container--hr__3{
            background-color: #c88396;
            margin-left: .6rem;
          }
        }
      }

    }
    .container--item__commodityMsg{
      margin-bottom: (15/75) + rem;
      background-color: #fff;
      position: relative;
      width: 100vw;
      height: (223/75) + rem;
      img{
        width: 2.5rem;
        height: 2.5rem;
        margin-left: .35rem;
        margin-top: .35rem;
      }
      .container--commodityMsg__right{
        position: absolute;
        right: .35rem;
        top: 0;
        height: 100%;
        line-height: (223/75) + rem;;
        display: inline-block;
        span{
          font-size: .35rem;
          vertical-align: middle;
        }
        img{
          width: .4rem;
          height: .4rem;
          display: inline-block;
          vertical-align: middle;
          margin: 0;
        }
      }
    }
    .container--item__body__msg{
      width: 100vw;
      list-style: none;
      .bottom--border{
        border-bottom: 1px solid #ccc;
      }
      .bottom--margin{
        margin-bottom: (15/75) + rem;
      }
      .container--msg__payment{
        background-color: #fff;
        width: 100vw;
        height: (85/75) + rem;
        .container--payment__option{
          line-height: (85/75) + rem;
          font-size: .35rem;
          text-align: left;
          margin-left: .35rem;
        }
        .container--payment__text{
          display: inline-block;
          float: right;
          line-height: (85/75) + rem;
          text-align: right;
          font-size: .35rem;
          margin-right: .7rem;
          span{
            font-size: .35rem;
            color: #f54813;
          }
        }
      }
    }
    .container--item__bottom__btn{
      width: 100vw;
      line-height: (80/75) + rem;
      text-align: center;
      color: #fff;
      position: absolute;
      bottom: 0;
      left: 0;
      font-size: .35rem;
      background-color: #589bf6;
    }
  }
}

</style>
